<template>
	<view class="doctor-list-page">
		<!-- 医生列表 -->
		<scroll-view class="doctor-list" scroll-y>
			<view class="doctor-card" v-for="(doctor, index) in doctors" :key="index"
				style="box-shadow: 7rpx 8rpx 16rpx 1rpx rgba(35, 219, 45, 0.3);" @click="goToDoctorDetail(doctor)">
				<image class="doctor-avatar" src="/static/doctor.png"></image>
				<view class="doctor-info">
					<text class="doctor-name">{{ doctor.name }}</text>
					<text class="doctor-hospital">{{ doctor.h_title }} {{ doctor.d_title }}</text>
					<view class="doctor-specialty">
						<view class="specialty-label">擅长：</view>
						<view class="specialty-content">{{ doctor.good_at }}</view>
					</view>
				</view>
				<button class="appointment-btn" @click.stop="makeAppointment(doctor)">预约</button>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import {
		ref
	} from "vue";
	// 定义响应式数据

	const departmentName = ref('');
	const doctors = ref([]);

	onLoad((options) => {
		const type = uni.getStorageSync('type')
		departmentName.value = type.title
		uni.request({
			url: 'http://localhost:3010/doctor/byHidAndDid',
			method: 'POST',
			header: {
				'Content-Type': 'application/x-www-form-urlencoded',
				'Authorization': 'Bearer ' + uni.getStorageSync('token')
			},
			data: {
				hid: type.hid,
				did: type.did
			},
			success: (res) => {
				console.log(res.data);
				doctors.value=res.data.data
			}
		})
	});

	// 跳转医生详情页方法
	const goToDoctorDetail = (doctor) => {
		uni.navigateTo({
			url: `/pages/HomeView/Information?id=${doctor.id}`
		});
	};

	// 预约方法
	const makeAppointment = (doctor) => {
		// 存储医生数据到本地
		uni.setStorageSync('selectedDoctor', {
			name: doctor.name,
			title: doctor.d_title,
			avatar: '/static/doctor.png', // 假设头像路径
			hid: doctor.hid,
			did: doctor.id,
			hospitalTitle: doctor.h_title
		});
		
		// 跳转到挂号页面
		uni.navigateTo({
			url:'/pages/ShopYuyue/ShopYuyue'
		});
	};
</script>

<style>
	.doctor-list-page {
		padding: 30rpx;
		min-height: 100vh;
		background-color: #f5f5f5;
		/* margin-top: 100px; */
	}

	/* 科室标题（如果后续需要可补充对应结构和样式，当前模板里没渲染该部分，可根据实际需求调整） */
	.department-header {
		display: flex;
		align-items: center;
		margin-bottom: 40rpx;
	}

	.green-bar {
		width: 8rpx;
		height: 40rpx;
		background-color: #00ff06;
		border-radius: 4rpx;
		margin-right: 20rpx;
	}

	.department-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}

	/* 医生列表 */
	.doctor-list {
		height: calc(100vh - 150rpx);
	}

	.doctor-card {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 25rpx;
		display: flex;
		align-items: center;
		position: relative;
		height: 170rpx;
	}

	.doctor-avatar {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		margin-right: 25rpx;
		flex-shrink: 0;
		bottom: 30rpx;
	}

	.doctor-info {
		flex: 1;
	}

	.doctor-name {
		display: block;
		font-size: 34rpx;
		font-weight: bold;
		color: #333;
	}

	.doctor-hospital {
		display: block;
		font-size: 28rpx;
		color: #666;
		margin-bottom: 5rpx;
	}

	.doctor-specialty {
		display: flex;
		font-size: 26rpx;
		line-height: 1.6;
		white-space: nowrap;
		/* 禁止换行 */
		overflow: hidden;
		/* 隐藏溢出内容 */
	}

	.specialty-label {
		color: #888;
		flex-shrink: 0;
	}

	.specialty-content {
		color: brown;
		flex: 1;
	}

	/* 预约按钮 */
	.appointment-btn {
		background-color: #00db0f;
		font-weight: 600;
		color: white;
		border-radius: 20rpx;
		padding: 0 30rpx;
		height: 60rpx;
		line-height: 60rpx;
		font-size: 28rpx;
		margin-left: 20rpx;
		flex-shrink: 0;
		border: none;
		bottom: 35rpx;
		right: 15rpx;
	}
</style>